import { useCallback, useEffect } from 'react'
import { Button } from "antd"
import {
  VideoCameraOutlined,
  PlayCircleOutlined,
  PauseCircleOutlined,
  SaveOutlined,
  StopOutlined,
  PlaySquareOutlined,
  StepForwardOutlined,
  ToolOutlined
} from '@ant-design/icons'
import { useAppStore } from '@renderer/pages/designer/store/appStore'
// 工具栏
export default function ToolBar() {

  const isStep = useAppStore(state => state.isStep)
  const taskStatus = useAppStore(state => state.taskStatus)
  const setTaskStatus = useAppStore(state => state.actions.setTaskStatus)
  const taskStart = useAppStore(state => state.actions.taskStart)
  const taskPause = useAppStore(state => state.actions.taskPause)
  const taskResume = useAppStore(state => state.actions.taskResume)
  const taskStop = useAppStore(state => state.actions.taskStop)

  const setViewActiveKey = useAppStore(state => state.actions.setViewActiveKey)
  const addDones = useAppStore(state => state.actions.addDones)

  // 注册监听及取消监听
  useEffect(() => {
    const onTaskStarted = ({ task }) => {
      // console.log('onTaskStarted', ...args)
      setViewActiveKey(task)
      setTaskStatus('RUNNING')
    }
    const onTaskPaused = () => {
      setTaskStatus('PAUSE')
    }
    const onTaskStoped = () => {
      setTaskStatus('IDLE')
    }
    const onTaskResumed = () => {
      setTaskStatus('RUNNING')
    }
    const onTaskFinished = (...args) => {
      console.log('onTaskFinished', ...args)
    }
    const onTaskAllFinished = (...args) => {
      console.log('onTaskAllFinished', ...args)
    }
    const onTaskCommandDone = ({ task, command }) => {
      addDones(task, command)
    }

    const offTaskStarted = window.electron?.ipcRenderer.on('task:started', onTaskStarted)
    const offTaskPaused = window.electron?.ipcRenderer.on('task:paused', onTaskPaused)
    const offTaskStoped = window.electron?.ipcRenderer.on('task:stoped', onTaskStoped)
    const offTaskResumed = window.electron?.ipcRenderer.on('task:resumed', onTaskResumed)
    const offTaskFinished = window.electron?.ipcRenderer.on('task:finished', onTaskFinished)
    const offTaskAllFinished = window.electron?.ipcRenderer.on('tasK:allFinished', onTaskAllFinished)
    const offTaskCommandDone = window.electron?.ipcRenderer.on('task:commandDone', onTaskCommandDone)


    return () => {
      offTaskStarted?.()
      offTaskPaused?.()
      offTaskStoped?.()
      offTaskResumed?.()
      offTaskFinished?.()
      offTaskAllFinished?.()
      offTaskCommandDone?.()
    }
  }, [])

  // 开始运行
  const handleTaskStart = useCallback(() => {
    taskStart(false)
  }, [])

  // 调试运行
  const handleTaskDebug = useCallback(() => {
    taskStart(true)
  }, [])

  return <div className="flex gap-3 bg-white px-3 py-2 border-b-black border-b-[1px] justify-between">
    <div>
      <Button
        icon={<SaveOutlined />}
        type="text"
        title="保存"
      >保存</Button>
    </div>
    <div className='flex gap-4'>
      <div>
        {
          taskStatus === 'IDLE' && <Button
            icon={<PlayCircleOutlined />}
            type="text"
            title="开始运行"
            onClick={handleTaskStart}
          >开始运行</Button>
        }
        {
          taskStatus === 'IDLE' && <Button
            icon={<ToolOutlined />}
            type="text"
            title="单步"
            onClick={handleTaskDebug}
          >单步</Button>
        }
        {
          taskStatus === 'RUNNING' && <Button
            icon={<PauseCircleOutlined />}
            type="text"
            title="暂停运行"
            onClick={taskPause}
          >暂停运行</Button>
        }
        {
          !isStep && taskStatus === 'PAUSE' && <Button
            icon={<PlaySquareOutlined />}
            type="text"
            title="恢复运行"
            onClick={taskResume}
          >恢复运行</Button>
        }
        {
          isStep && taskStatus === 'PAUSE' && <Button
            icon={<StepForwardOutlined />}
            type="text"
            title="下一步"
          >下一步</Button>
        }
        {
          (taskStatus === 'RUNNING' || taskStatus === 'PAUSE') && <Button
            icon={<StopOutlined />}
            type="text"
            title="停止运行"
            onClick={taskStop}
          >停止运行</Button>
        }
      </div>
      <div>
        <Button
          icon={<VideoCameraOutlined />}
          type="text"
          title="开始录制"
          onClick={() => {
            window.electron?.ipcRenderer.send('window:create', 'RECORDER')
          }}
        >开始录制</Button>
      </div>
    </div>
  </div>
}
